<template>
	<view class="content">
		<input class="input-student" placeholder="请输入学生账户" v-model="studentValue"/>
		<input class="input-password" placeholder="请输入密码" password="true" v-model="passwordValue"/>
				
		<view class="uni-btn-login" @click="btnLoginClick"></view>
		<view class="uni-panel-check">
			<checkbox :checked="isChecked" @click="clickCheck"></checkbox>
			<view @click="clickYHXY">《用户协议》</view>
			<view @click="clickYSZC">《隐私政策》</view>
		</view>
		<view class="uni-btn-registe" @click="btnRegisteClick">注册</view>
	</view>
</template>

<script>
	import { login } from '@/api/api.js';
	import store from "../../store";
	export default {
		    mounted() {
		            // #ifdef APP-PLUS
		            plus.screen.lockOrientation('landscape');
		            // #endif
		        },
		data() {
			return {
				studentValue: '',
				passwordValue: '',
				isChecked: false,
			}
		},
		onLoad(options) {
			uni.removeStorageSync('student_info');
			let username = uni.getStorageSync('username');
			if( username){
				this.studentValue = username;
			}
			let password = uni.getStorageSync('password');
			if( password){
				this.passwordValue = password;
			}
		},
		methods: {
			btnLoginClick(){
				if( this.studentValue == ''){
					uni.showToast({
					    title: '请输入账户',
						icon: 'error',
					    duration: 2000
					});
					return;
				}
				if( this.passwordValue == ''){
					uni.showToast({
					    title: '请输入密码',
						icon: 'error',
					    duration: 2000
					});
					return;
				}
				if(!this.isChecked){
					uni.showToast({
					    title: '请您先同意《隐私政策》和《用户协议》',
						icon: 'none',
					    duration: 2000
					});
					return;
				}

				let params = {username: this.studentValue, password: this.passwordValue};
				login(params).then(res => {
					//console.log(res)
					if( res.code != 0){
						uni.showModal({
							title: '提示',
							content: res.msg,
						    showCancel: false
						});
					}else if( res.data && res.data.userData){
						uni.setStorageSync('username', this.studentValue);
						uni.setStorageSync('password', this.passwordValue);
						store.commit('UPDATE_LOGIN', res.data.token);
						store.commit('UPDATE_USERINFO', res.data.userData);
						let url = '/pages/home/index';
						if( 2 == res.data.userData.user_type){
							url = '/pages/selectstudent/index'
						}
						uni.redirectTo({ url });
					}else{
						uni.showToast({
						    title: '未知错误',
							icon: 'error',
						    duration: 2000
						});
					}
				}).catch(err => {
					uni.showToast({
					    title: err,
						icon: 'none',
					    duration: 2000
					});
				});
			},
			btnRegisteClick(){
				uni.navigateTo({
					url: '/pages/registe/index'
				})
			},
			clickCheck(){
				this.isChecked = !this.isChecked;
			},
			clickYSZC(){
				uni.navigateTo({
					url: '/pages/webview/index?url=' + decodeURIComponent('/upload/yszc.html')
				})
			},
			clickYHXY(){
				uni.navigateTo({
					url: '/pages/webview/index?url=' + decodeURIComponent('/upload/yhxy.html')
				})
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/login.jpg');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.input-student {
		position: absolute;
		left: 73%;
		top: 46%;
		height: 10%;
		font-size: 4vmin;
	}
	
	.input-password {
		position: absolute;
		left: 73%;
		top: 62%;
		height: 10%;
		font-size: 4vmin;
	}
	
	.uni-btn-login {
		position: absolute;
		left: 73%;
		top: 76%;
		width: 18%;
		height: 10%;
		font-size: 5vmin;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.uni-panel-check{
		position: absolute;
		left: 53%;
		top: 89%;
		width: 38%;
		height: 10%;
		display: flex;
		flex-direction: row;
		color: white;
	}
	
	.uni-btn-registe {
		position: absolute;
		left: 93%;
		top: 79%;
		width: 8%;
		height: 10%;
		font-size: 5vmin;
		font-weight: bold;
		color: royalblue;
	}
	
	.panel-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.panel-mask-bg{
		width: 55%;
		height: 90%;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
		color: black;
	}
	.panel-mask-tips{
		width: 90%;
		margin-left: 5%;
		display: flex;
		flex-direction: row;
		overflow: auto;
		font-size: 5vmin;
	}
	.panel-mask-title{
		font-size: 5vmin;
		font-weight: bold;
		margin: 4% 0;
	}
	.btn-mask-agree{
		height: 15%;
		color: orange;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}
	.btn-mask-unagree{
		height: 10%;
		color: lightgray;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
